<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分布式任务调度</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
    <style>
        body {
            background-color: #ffffff;
        }
        label.required:after {
        	  content:'*';
        	  color:red;
        }   
        .delbtn{
            position: relative;
            display: inline-block;
            background: #FFB800;
            border: 1px solid #FFB800;
            border-radius: 2px;
            padding: 4px 12px;
            overflow: hidden;
            color: #FFFFFF;
            text-decoration: none;
            text-indent: 0;
            line-height: 27px;
            width:92px;
        }             
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <blockquote class="layui-elem-quote layui-text">
            检测说明：该检测是检测该pod的服务
        </blockquote>
        <form class="layui-form layui-form-pane" action=""  lay-filter="podCheckInfo">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>pod服务检测</legend>
            </fieldset>           
                                      
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">任务类型</label>
                <div class="layui-input-inline" style="width:600px">
                    <input type="radio" name="checkType" value="http" lay-filter="configType" title="url检测" checked="">
                    <input type="radio" name="checkType" value="tcp" lay-filter="configType" title="TCP检测">
                    <input type="radio" name="checkType" value="ping" lay-filter="configType" title="ping检测">
                    <input type="radio" name="checkType" value="dns" lay-filter="configType" title="DNS检测">
                    <input type="radio" name="checkType" value="shell" lay-filter="configType" title="运行命令">                                                            
                </div>
                <div class="layui-form-mid layui-word-aux">注:url和tcp检测是向pod内的服务发起检测,ping/dns/运行命令是在pod内执行命令向外发起检测</div> 
            </div>

        <div id="httpTpl">
            <div class="layui-form-item">
                <label class="layui-form-label">Url</label>
                <div class="layui-input-inline" style="width:400px">
                    <input type="text" name="httpUrl" lay-reqtext="url不能为空" placeholder="eg:/v1/check" value="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">注:url为空时读取annotations中配置的url【若有配置】的值</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" required>端口</label>
                <div class="layui-input-inline" style="width:400px">
                    <input type="text" name="httpPort" lay-reqtext="端口不能为空" placeholder="输入pod的服务端口" value="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">注:为空时,默认80端口</div>
            </div>
            <div class="layui-form-item" pane="" style="width:500px">
                <label class="layui-form-label">请求方法</label>
                <div class="layui-input-block">
                    <input type="radio" name="httpMethod" value="GET"  lay-filter="httpMethod" title="GET" checked="">
                    <input type="radio" name="httpMethod" value="POST" lay-filter="httpMethod" title="POST">                                                          
                </div>
            </div>      
          
          <div class="reqHeaderTpl">        
            <div class="layui-form-item">
                <label class="layui-form-label">请求头</label>
                <div class="layui-input-inline">
                    <input type="text" name="httpHeaderKey[]" placeholder="Key" value="" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="httpHeaderValue[]" placeholder="Value" value="" class="layui-input">
                </div>
                <div class="layui-input-inline">  
                    <button class="layui-btn layui-btn-normal" id="newaddbtn">添加一行</button>
                </div>
                <div class="layui-form-mid layui-word-aux">注:默认Content-Type为application/x-www-form-urlencoded,body是json格式时设置Content-Type为application/json</div>                                 
            </div>
          </div>   
            
            <div class="layui-form-item"  id="postBodyTpl" style="width:500px">
                <label class="layui-form-label">Body</label>
                <div class="layui-input-block">
                    <textarea name="httpReqBody" style="height:180px" class="layui-textarea" placeholder="输入post的内容"></textarea>
                </div>
            </div>                        
        </div>
        <div id="portTpl">
            <div class="layui-form-item">
                <label class="layui-form-label required">端口</label>
                <div class="layui-input-inline" style="width:400px">
                    <input type="text" name="tcpPort" placeholder="端口号" value="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">注:输入pod服务的端口号</div>
            </div> 
            <div class="layui-form-item">
                <label class="layui-form-label">命令</label>
                <div class="layui-input-inline" style="width:400px">
                    <input type="text" name="tcpCmd" placeholder="自定义命令" value="" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">注:默认用telnet,自定义检测命令</div>
            </div> 
        </div>
        <div id="pingTpl">    
            <div class="layui-form-item">
                <label class="layui-form-label required">ping检测ip</label>
                <div class="layui-input-inline" style="width:400px">
                    <input type="text" name="pingIp" placeholder="10.1.2.2" value="" class="layui-input">
                </div>
            </div> 
            
            <div class="layui-form-item">
                <label class="layui-form-label">ping包数</label>
                <div class="layui-input-inline" style="width:400px">
                    <input type="number" name="pingPacketNum" placeholder="" value="2" class="layui-input">
                </div>
            </div> 
        </div>
        <div id="dnsTpl">    
             <div class="layui-form-item" id="">
                <label class="layui-form-label required">检测域名</label>
                <div class="layui-input-inline" style="width:400px">
                    <input type="text" name="dnsDomain" placeholder="www.baidu.com" value="" class="layui-input">
                </div>
            </div> 

            <div class="layui-form-item">
                <label class="layui-form-label">DNS</label>
                <div class="layui-input-inline" style="width:400px">
                    <input type="text" name="dnsIp" placeholder="114.114.114.114" value="" class="layui-input">
                </div>
            </div> 

        </div>
        <div id="shellTpl">   
            <div class="layui-form-item layui-form-text" style="width:500px">
                <label class="layui-form-label required">shell命令</label>
                <div class="layui-input-block">
                    <textarea name="shellTxt" style="height:220px" class="layui-textarea" placeholder="输入执行的命令"></textarea>
                </div>
            </div>
        </div>
                                                               
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">开始检测</button>
                </div>
            </div>
        </form>
      <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
          <legend>检测结果打印</legend>
      </fieldset>
      <pre class="layui-code"><div id="logtext"></div></pre>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','code'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        layui.code({
             elem: '#logtext'
            ,title: '执行结果:'
            ,skin: 'notepad' //如果要默认风格，不用设定该key。
            ,encode: false
        });

  function streamResponse(response) {
    var container = $('#logtext');
    var currentContent = container.text();
    container.text(currentContent + response);
    // 自动滚动到底部
    container.scrollTop(container.scrollHeight);
  }

            //页面初始化
              $("#httpTpl").show();
              $("#portTpl").hide();
              $("#pingTpl").hide();
              $("#dnsTpl").hide();
              $("#shellTpl").hide();

        form.on('radio(configType)', function (data) { 
            if(data.value == 'http'){
              $("#httpTpl").show();
              $("#portTpl").hide();
              $("#pingTpl").hide();
              $("#dnsTpl").hide();
              $("#shellTpl").hide();
            }else if(data.value == 'tcp') {
              $("#httpTpl").hide();
              $("#portTpl").show();
              $("#pingTpl").hide();
              $("#dnsTpl").hide();
              $("#shellTpl").hide();       
            }else if (data.value == 'ping') {
              $("#httpTpl").hide();
              $("#portTpl").hide();
              $("#pingTpl").show();
              $("#dnsTpl").hide();
              $("#shellTpl").hide();                              
            }else if (data.value == 'dns') {
              $("#httpTpl").hide();
              $("#portTpl").hide();
              $("#pingTpl").hide();
              $("#dnsTpl").show();
              $("#shellTpl").hide();                              
            }else{
              $("#httpTpl").hide();
              $("#portTpl").hide();
              $("#pingTpl").hide();
              $("#dnsTpl").hide();
              $("#shellTpl").show();                
            }  
        });

        $("#postBodyTpl").hide();
        form.on('radio(httpMethod)', function (data) { 
            if(data.value == 'POST'){
              $("#postBodyTpl").show();
            }else{
              $("#postBodyTpl").hide();               
            }  
        });

        var TplIndex = 0;
        $('#newaddbtn').on("click",function(){
          TplIndex++;
          var addTpl =
              '<div class="layui-form-item" id="tpl-'+TplIndex+'">' +
                  '<label class="layui-form-label">请求头</label>' +
                  '<div class="layui-input-inline">' +
                        '<input type="text" name="httpHeaderKey[]" id="httpHeaderKey'+TplIndex+'" placeholder="Key" value="" class="layui-input">' +
                  '</div>' +    
                  '<div class="layui-input-inline">' +  
                      '<input type="text" name="httpHeaderValue[]" id="httpHeaderValue'+TplIndex+'" placeholder="Value" value="" class="layui-input">' +
                  '</div>' +
                  '<div class="layui-input-inline">' +  
                      '<input class="delbtn" type="button" id="newDelbtn" value="删除一行" onclick="delTpl('+TplIndex+');" />' +
                  '</div>' +                
              '</div>'
            $('.reqHeaderTpl').append(addTpl);   
          form.render(); 
          return false;   
        });

			  //form.val('podCheckInfo', {
			  //  "httpPort": containerPort
			  //})

        //监听提交
        form.on('submit(saveBtn)', function (data) {
                data.field.httpUrl = encodeURI(data.field.httpUrl.replace(/^\s*|\s*$/g,"")); //替换空格
                data.field.tcpPort = data.field.tcpPort.replace(/^\s*|\s*$/g,""); //替换空格
                data.field.tcpCmd = data.field.tcpCmd.replace(/^\s*|\s*$/g,""); //替换空格
                data.field.pingIp = data.field.pingIp.replace(/^\s*|\s*$/g,"");
                data.field.pingPacketNum = data.field.pingPacketNum.replace(/^\s*|\s*$/g,"");
                data.field.dnsDomain = data.field.dnsDomain.replace(/^\s*|\s*$/g,"");
                data.field.dnsIp = data.field.dnsIp.replace(/^\s*|\s*$/g,"");
                data.field.shellTxt = btoa(data.field.shellTxt);
                data.field.httpReqBody = btoa(data.field.httpReqBody);
					      //console.log(data.field);
			          layer.confirm('确定检测?', {icon: 3, title:'提示',yes: function(index){
                     layer.msg('此处需运行5-60s左右');
                        streamResponse("\n===== 开始执行...\n");
                        try {
                          fetch('/xkube/pod/v1/Check'+location.search, {
                            method: 'POST',
                            headers: {
                              'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(data.field)
                          }).then(response => {
                              const reader = response.body.getReader();
                              return new ReadableStream({
                                start(controller) {
                                  function push() {
                                    reader.read().then(({done, value}) => {
                                      if (done) {
                                        controller.close();
                                        streamResponse("\n==== 执行结束");
                                        return;
                                      }
                                      var text = new TextDecoder().decode(value);
                                      streamResponse(text);
                                      push();
                                    });
                                  }
                                  push();
                                }
                              });
                          });
                          //if (!response.ok) {
                          //  throw new Error(`HTTP error! status: ${response.status}`);
                          //}
                          //return await response.json();
                        } catch (error) {
                          console.error('POST请求失败:', error);
                          throw error;
                        }	
                    //return false;	  	                      	   		  	  
                  },
                  cancel: function(index, layero){ 
                    layer.close(index);
		                console.log("不操作");
                  } 
                });
              return false;
        });

    });
    
    function delTpl(id) {
      //console.log(id);
      var TplIndex = id;
      TplIndex--;
      $("#tpl-"+id).remove();
    }
    
</script>
</body>
</html>